<template>
	<view class="cateList">
	 <swiper class="topSwiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" v-if="dealCateList" >
	 	<swiper-item v-for="(item,index) in dealCateList.category.bannerUrlList" :key="index">
	 		<image :src="item"></image>
	 	</swiper-item>
	 </swiper>
	   <view class="frontDesc">{{dealCateList.category.frontDesc}}</view>
	   <view class="frontName">{{dealCateList.category.frontName}}</view>
		<!-- 商品列表 -->
		<view class="goodsList">
			<view class="goodsItem" v-for="item in dealCateList.itemList" :key="item.id" @click="toDetail(item)">
				<image :src="item.primaryPicUrl" mode=""></image>
				<view class="goods_desc">
					{{item.name}}
				</view>
				<view class="goods_price">
					{{item.retailPrice}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js';
	import { mapActions,mapState } from 'vuex'
	export default {
		name:"CateList",
		props:['L1Id'],
		data() {
			return {
				cateList:[]
			};
		},
		mounted() {
			this.getIndexCatelistAction();
		},
		computed:{
			...mapState({
				indexCateList:state=>state.home.indexCateList
			}),
			//对拿到的indexCateList做处理
			dealCateList(){
				this.cateList = this.indexCateList
				return this.cateList.find(item=>item.category.parentId===this.L1Id)
				//console.log(this.cateList)
			}
			
		},
		methods:{
			...mapActions('home',['getIndexCatelistAction']),
			// async getCateList(){
			// 	const res = await request('/getIndexCatelist');
			// 	console.log(res.indexCateList)
			// }
			//跳转去详情页
			toDetail(goodsItem){
				wx.navigateTo({
					url:'/pages/goodsDetail/goodsDetail?goodsItem='+JSON.stringify(goodsItem)
				})
			}
		}
	}
</script>

<style lang="stylus">
.cateList
	.topSwiper
		height:400rpx
		image
			width:100%
			height: 100%
	.frontDesc
		font-size: 40rpx
		height: 50rpx
		text-align: center
		margin-top: 10rpx
		color: #000
	.frontName
		font-size: 30rpx
		height: 50rpx
		margin-top: 10rpx
		text-align: center
		color: #ddd
	.goodsList
		display: flex
		flex-wrap: wrap
		justify-content: space-around
		&::after
			content: ""
			width:344rpx
		.goodsItem
			width: 344rpx
			height: 480rpx
			text-align: center
			image
				width: 344rpx
				height: 344rpx
			.goods_desc
				font-size: 28rpx
				white-space: pre-wrap
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				text-overflow :ellipsis
				overflow: hidden
			.goods_price
				color: #aa0000
</style>